/**
 * 
 * @file Img.js
 * 
 * --------------------------------------------------
 * 
 * @fileoverview `图片的功能`
 * 
 * @flow
 * -------------------
 * 
 * img 标签，一定要实现alt属性
 * alt 属性是一个必需的属性，它规定在图像无法显示时的替代文本
 * -------------------
 * 
 * 2中加载方式
 * [1] 加载本地图片： src={require('路径')} 、src { 定义的require的变量名 }
 * [2] 加载网络图片： src={ {网址} } 、src={ 导入的对象名 }
 * ---
 * 例子(3种显示图片例子)
 * //方式一：import tsIcon from '../images/typescript.jpeg';
 * //方式二：const tsIcon = require('../images/typescript.jpeg');
 * //使用方式一：<img src={tsIcon} alt="" />
 * //使用方式二：<div style={{background: `url(${tsIcon}) no-repeat`}}></div>
 * //使用方式三：const styles = { test: { background: `url(${tsIcon}) no-repeat center` }}render() { return ( <div style={styles.test}></div> )}
 * 
 */


import React, { Component } from 'react'
import GetImg from '../../asstes/Images'

//导入本地图片 第二种
// import Logo from '../asstes/Images/xxx'

export default class Index extends Component {
  // constructor(props) {
  //   super(props)
  // }

  render(){
    let tsIcon = GetImg(2);
    let imgStyle = {marginTop: 10, marginLeft: 20, width: 40, height: 40}
    return(
      <div>
        {/* 远程图片 */}
        img标签展示：<br />
        <img style={imgStyle} src={GetImg(1)} alt='图片失败' title='网络图片-1'/>

        {/* 本地图片 第一种 */}
        {/* <img src={require('../asstes/Images/xxx')}/> */}

        {/* div background 显示图片 */}
        <div style={{ width: 50, height: 50, borderRadius: '3px' ,borderWidth: '10px', borderStyle: 'solid', borderColor: "red", background: `url(${tsIcon}) no-repeat`}}></div>
      </div>
    )
  }
}